<template>
    <div class="left">
        <div class="left-top" :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none' }">
            <div
                :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', textAlign: scaleX === -1 ? 'right' : 'left' }">
                {{ title }}</div>
        </div>
        <div class="left-bottom">
            <div ref="chartContainer" class="chart-container" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    scaleX: {
        type: Number,
        default: 1
    },
    option: {
        type: Object,
        default: () => ({})
    }
});

const chartContainer = ref(null);
let chartInstance = null;
let timer = null;
const xdata = ['土地', '新筑股份', '财产保险', '发展投诚', '轨道投资', '新能源', '通信'];
const data = [57.8, 32.7, 24.5, 15.6, 12.3, 11.5, 8.2];
const maxArr = [60, 60, 60, 60, 60, 60, 60];

// 为每个塔创建不同的渐变色
const createGradientColors = (count) => {
    const baseColors = [
        { start: '#01EAED', middle: '#02C4DD', end: '#029ED9' }, // 原始蓝色
        { start: '#FF6B6B', middle: '#FF4757', end: '#FF1A2C' }, // 红色
        { start: '#FFD166', middle: '#FFC107', end: '#FFA000' }, // 黄色
        { start: '#06D6A0', middle: '#05C46B', end: '#00B894' }, // 绿色
        { start: '#118AB2', middle: '#0A9396', end: '#0077B6' }, // 深蓝色
        { start: '#9381FF', middle: '#8A79DF', end: '#7B68EE' }, // 紫色
        { start: '#FF9F1C', middle: '#FF8C00', end: '#FF7F50' }  // 橙色
    ];

    // 如果需要更多颜色，可以通过旋转和调整基础颜色来生成
    const colors = [];
    for (let i = 0; i < count; i++) {
        const baseColor = baseColors[i % baseColors.length];
        colors.push(
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: baseColor.start },
                { offset: 0.5, color: baseColor.middle },
                { offset: 1, color: baseColor.end }
            ])
        );
    }
    return colors;
};

// 创建颜色数组
const towerColors = createGradientColors(data.length);

// 配置项
const option = {
    backgroundColor: "rgba(5,39,58,0.1)", // 背景色
    tooltip: {
        trigger: "axis",
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
            let dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${params[0].color}"></span>`;
            return (
                params[0].name +
                "<br>" +
                "杆塔数量 ：" +
                params[0].value
            );
        }
    },
    grid: {
        left: "4%",
        right: "4%",
        bottom: "3%",
        top: "15%",
        containLabel: true
    },
    xAxis: {
        data: xdata,
        triggerEvent: true,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
                padding: [14, 0, 0, 0],
                fontSize: 14,
                color: "rgba(255,255,255,1)"
            }
        }
    },
    yAxis: {
        triggerEvent: true,
        nameTextStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 16,
            padding: [0, 0, 10, -20]
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,.1)'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,.1)'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "rgb(148,159,167)",
                fontSize: 16
            }
        }
    },
    series: [
        {
            name: "数量",
            barMinHeight: 10,
            type: "pictorialBar",
            barCategoryGap: "60%",
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
                normal: {
                    color: function (params) {
                        return towerColors[params.dataIndex];
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#fff",
                        fontSize: 20
                    }
                }
            },
            data: data,
            z: 10
        },
        {
            name: "hill",
            type: "bar",
            barWidth: '20%',
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
                normal: {
                    color: "rgba(11,47,68,.8)"
                }
            },
            data: maxArr,
            z: 9
        }
    ]
};

const updateChart = () => {
    if (chartInstance) {
        chartInstance.setOption(option);
    }
};

onMounted(() => {
    chartInstance = echarts.init(chartContainer.value);
    updateChart();
    timer = setInterval(updateChart, 1000);
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    clearInterval(timer);
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.left {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.left-top {
    /* width: 90%; */
    height: 25%;
    background: url('/homePageImg/tl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding: 0 0 4% 0;
    font-size: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-bottom {
    flex: 1;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>